<template>
	 <view>
		 <view class="">{{error}}</view>
		 <view class="img-box-canvas" v-if="!showCanvas">
			 <image lazy-load="true"  :src="savedFilePath"  mode="widthFix" width="90%"></image>
		 </view>
		 <view class="" style="width: 750upx;height: 100upx;"></view>
	        <canvas v-if="showCanvas" style="opacity: 0;position: relative;width: 350px; height: 560px;z-index: 9;" canvas-id="firstCanvas"></canvas>
			<view class="save-box">
				<!-- <image lazy-load="true"  @click="saveImage" src="../../static/images/changan.png" class="save-img"></image> -->
				<button class="save-img" @click="saveImage" >长按二维码，保存图片</button>
			</view>
			<tki-qrcode
			style="position: absolute;z-index: -1;top:-2000upx;left: -1000upx;"
			   ref="qrcode"
			   cid="qrcode1"
				:lv= "1"
			   :val="qrcode_url"
			   @result="qrR" />
	  </view>
</template>
 
<script>
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
export default {
	data() {
		return {
			canvas_tit:'',
			canvas_msg:'给你推荐了一个好东西',
			text_top:0,
			come:'',
			canvas_mak:'',
			canvas_money:'',
			img_header:'',
			img_qrcode:'',
			img_goods:'',
			error:'',
			savedFilePath:'',
			showCanvas:true,
			qrcode_url:'',
			base_avatar:'',
			qrcode_url_new:'',
			base_nickname:''
		};
	},
	onLoad(e) {
		var self = this;
		var reg = /\uD83C\uDFF4\uDB40\uDC67\uDB40\uDC62(?:\uDB40\uDC65\uDB40\uDC6E\uDB40\uDC67|\uDB40\uDC73\uDB40\uDC63\uDB40\uDC74|\uDB40\uDC77\uDB40\uDC6C\uDB40\uDC73)\uDB40\uDC7F|\uD83D\uDC68(?:\uD83C\uDFFC\u200D(?:\uD83E\uDD1D\u200D\uD83D\uDC68\uD83C\uDFFB|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C\uDFFF\u200D(?:\uD83E\uDD1D\u200D\uD83D\uDC68(?:\uD83C[\uDFFB-\uDFFE])|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C\uDFFE\u200D(?:\uD83E\uDD1D\u200D\uD83D\uDC68(?:\uD83C[\uDFFB-\uDFFD])|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C\uDFFD\u200D(?:\uD83E\uDD1D\u200D\uD83D\uDC68(?:\uD83C[\uDFFB\uDFFC])|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\u200D(?:\u2764\uFE0F\u200D(?:\uD83D\uDC8B\u200D)?\uD83D\uDC68|(?:\uD83D[\uDC68\uDC69])\u200D(?:\uD83D\uDC66\u200D\uD83D\uDC66|\uD83D\uDC67\u200D(?:\uD83D[\uDC66\uDC67]))|\uD83D\uDC66\u200D\uD83D\uDC66|\uD83D\uDC67\u200D(?:\uD83D[\uDC66\uDC67])|(?:\uD83D[\uDC68\uDC69])\u200D(?:\uD83D[\uDC66\uDC67])|[\u2695\u2696\u2708]\uFE0F|\uD83D[\uDC66\uDC67]|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|(?:\uD83C\uDFFB\u200D[\u2695\u2696\u2708]|\uD83C\uDFFF\u200D[\u2695\u2696\u2708]|\uD83C\uDFFE\u200D[\u2695\u2696\u2708]|\uD83C\uDFFD\u200D[\u2695\u2696\u2708]|\uD83C\uDFFC\u200D[\u2695\u2696\u2708])\uFE0F|\uD83C\uDFFB\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C[\uDFFB-\uDFFF])|(?:\uD83E\uDDD1\uD83C\uDFFB\u200D\uD83E\uDD1D\u200D\uD83E\uDDD1|\uD83D\uDC69\uD83C\uDFFC\u200D\uD83E\uDD1D\u200D\uD83D\uDC69)\uD83C\uDFFB|\uD83E\uDDD1(?:\uD83C\uDFFF\u200D\uD83E\uDD1D\u200D\uD83E\uDDD1(?:\uD83C[\uDFFB-\uDFFF])|\u200D\uD83E\uDD1D\u200D\uD83E\uDDD1)|(?:\uD83E\uDDD1\uD83C\uDFFE\u200D\uD83E\uDD1D\u200D\uD83E\uDDD1|\uD83D\uDC69\uD83C\uDFFF\u200D\uD83E\uDD1D\u200D(?:\uD83D[\uDC68\uDC69]))(?:\uD83C[\uDFFB-\uDFFE])|(?:\uD83E\uDDD1\uD83C\uDFFC\u200D\uD83E\uDD1D\u200D\uD83E\uDDD1|\uD83D\uDC69\uD83C\uDFFD\u200D\uD83E\uDD1D\u200D\uD83D\uDC69)(?:\uD83C[\uDFFB\uDFFC])|\uD83D\uDC69(?:\uD83C\uDFFE\u200D(?:\uD83E\uDD1D\u200D\uD83D\uDC68(?:\uD83C[\uDFFB-\uDFFD\uDFFF])|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C\uDFFC\u200D(?:\uD83E\uDD1D\u200D\uD83D\uDC68(?:\uD83C[\uDFFB\uDFFD-\uDFFF])|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C\uDFFB\u200D(?:\uD83E\uDD1D\u200D\uD83D\uDC68(?:\uD83C[\uDFFC-\uDFFF])|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C\uDFFD\u200D(?:\uD83E\uDD1D\u200D\uD83D\uDC68(?:\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\u200D(?:\u2764\uFE0F\u200D(?:\uD83D\uDC8B\u200D(?:\uD83D[\uDC68\uDC69])|\uD83D[\uDC68\uDC69])|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C\uDFFF\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD]))|\uD83D\uDC69\u200D\uD83D\uDC69\u200D(?:\uD83D\uDC66\u200D\uD83D\uDC66|\uD83D\uDC67\u200D(?:\uD83D[\uDC66\uDC67]))|(?:\uD83E\uDDD1\uD83C\uDFFD\u200D\uD83E\uDD1D\u200D\uD83E\uDDD1|\uD83D\uDC69\uD83C\uDFFE\u200D\uD83E\uDD1D\u200D\uD83D\uDC69)(?:\uD83C[\uDFFB-\uDFFD])|\uD83D\uDC69\u200D\uD83D\uDC66\u200D\uD83D\uDC66|\uD83D\uDC69\u200D\uD83D\uDC69\u200D(?:\uD83D[\uDC66\uDC67])|(?:\uD83D\uDC41\uFE0F\u200D\uD83D\uDDE8|\uD83D\uDC69(?:\uD83C\uDFFF\u200D[\u2695\u2696\u2708]|\uD83C\uDFFE\u200D[\u2695\u2696\u2708]|\uD83C\uDFFC\u200D[\u2695\u2696\u2708]|\uD83C\uDFFB\u200D[\u2695\u2696\u2708]|\uD83C\uDFFD\u200D[\u2695\u2696\u2708]|\u200D[\u2695\u2696\u2708])|(?:(?:\u26F9|\uD83C[\uDFCB\uDFCC]|\uD83D\uDD75)\uFE0F|\uD83D\uDC6F|\uD83E[\uDD3C\uDDDE\uDDDF])\u200D[\u2640\u2642]|(?:\u26F9|\uD83C[\uDFCB\uDFCC]|\uD83D\uDD75)(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2640\u2642]|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3D\uDD3E\uDDB8\uDDB9\uDDCD-\uDDCF\uDDD6-\uDDDD])(?:(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2640\u2642]|\u200D[\u2640\u2642])|\uD83C\uDFF4\u200D\u2620)\uFE0F|\uD83D\uDC69\u200D\uD83D\uDC67\u200D(?:\uD83D[\uDC66\uDC67])|\uD83C\uDFF3\uFE0F\u200D\uD83C\uDF08|\uD83D\uDC15\u200D\uD83E\uDDBA|\uD83D\uDC69\u200D\uD83D\uDC66|\uD83D\uDC69\u200D\uD83D\uDC67|\uD83C\uDDFD\uD83C\uDDF0|\uD83C\uDDF4\uD83C\uDDF2|\uD83C\uDDF6\uD83C\uDDE6|[#\*0-9]\uFE0F\u20E3|\uD83C\uDDE7(?:\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF])|\uD83C\uDDF9(?:\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF])|\uD83C\uDDEA(?:\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA])|\uD83E\uDDD1(?:\uD83C[\uDFFB-\uDFFF])|\uD83C\uDDF7(?:\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC])|\uD83D\uDC69(?:\uD83C[\uDFFB-\uDFFF])|\uD83C\uDDF2(?:\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF])|\uD83C\uDDE6(?:\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF])|\uD83C\uDDF0(?:\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF])|\uD83C\uDDED(?:\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA])|\uD83C\uDDE9(?:\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF])|\uD83C\uDDFE(?:\uD83C[\uDDEA\uDDF9])|\uD83C\uDDEC(?:\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE])|\uD83C\uDDF8(?:\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF])|\uD83C\uDDEB(?:\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7])|\uD83C\uDDF5(?:\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE])|\uD83C\uDDFB(?:\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA])|\uD83C\uDDF3(?:\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF])|\uD83C\uDDE8(?:\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF5\uDDF7\uDDFA-\uDDFF])|\uD83C\uDDF1(?:\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE])|\uD83C\uDDFF(?:\uD83C[\uDDE6\uDDF2\uDDFC])|\uD83C\uDDFC(?:\uD83C[\uDDEB\uDDF8])|\uD83C\uDDFA(?:\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF])|\uD83C\uDDEE(?:\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9])|\uD83C\uDDEF(?:\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5])|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3D\uDD3E\uDDB8\uDDB9\uDDCD-\uDDCF\uDDD6-\uDDDD])(?:\uD83C[\uDFFB-\uDFFF])|(?:\u26F9|\uD83C[\uDFCB\uDFCC]|\uD83D\uDD75)(?:\uD83C[\uDFFB-\uDFFF])|(?:[\u261D\u270A-\u270D]|\uD83C[\uDF85\uDFC2\uDFC7]|\uD83D[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC6B-\uDC6D\uDC70\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDCAA\uDD74\uDD7A\uDD90\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC]|\uD83E[\uDD0F\uDD18-\uDD1C\uDD1E\uDD1F\uDD30-\uDD36\uDDB5\uDDB6\uDDBB\uDDD2-\uDDD5])(?:\uD83C[\uDFFB-\uDFFF])|(?:[\u231A\u231B\u23E9-\u23EC\u23F0\u23F3\u25FD\u25FE\u2614\u2615\u2648-\u2653\u267F\u2693\u26A1\u26AA\u26AB\u26BD\u26BE\u26C4\u26C5\u26CE\u26D4\u26EA\u26F2\u26F3\u26F5\u26FA\u26FD\u2705\u270A\u270B\u2728\u274C\u274E\u2753-\u2755\u2757\u2795-\u2797\u27B0\u27BF\u2B1B\u2B1C\u2B50\u2B55]|\uD83C[\uDC04\uDCCF\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF7C\uDF7E-\uDF93\uDFA0-\uDFCA\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF4\uDFF8-\uDFFF]|\uD83D[\uDC00-\uDC3E\uDC40\uDC42-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDD7A\uDD95\uDD96\uDDA4\uDDFB-\uDE4F\uDE80-\uDEC5\uDECC\uDED0-\uDED2\uDED5\uDEEB\uDEEC\uDEF4-\uDEFA\uDFE0-\uDFEB]|\uD83E[\uDD0D-\uDD3A\uDD3C-\uDD45\uDD47-\uDD71\uDD73-\uDD76\uDD7A-\uDDA2\uDDA5-\uDDAA\uDDAE-\uDDCA\uDDCD-\uDDFF\uDE70-\uDE73\uDE78-\uDE7A\uDE80-\uDE82\uDE90-\uDE95])|(?:[#\*0-9\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u261D\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u265F\u2660\u2663\u2665\u2666\u2668\u267B\u267E\u267F\u2692-\u2697\u2699\u269B\u269C\u26A0\u26A1\u26AA\u26AB\u26B0\u26B1\u26BD\u26BE\u26C4\u26C5\u26C8\u26CE\u26CF\u26D1\u26D3\u26D4\u26E9\u26EA\u26F0-\u26F5\u26F7-\u26FA\u26FD\u2702\u2705\u2708-\u270D\u270F\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763\u2764\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC04\uDCCF\uDD70\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01\uDE02\uDE1A\uDE2F\uDE32-\uDE3A\uDE50\uDE51\uDF00-\uDF21\uDF24-\uDF93\uDF96\uDF97\uDF99-\uDF9B\uDF9E-\uDFF0\uDFF3-\uDFF5\uDFF7-\uDFFF]|\uD83D[\uDC00-\uDCFD\uDCFF-\uDD3D\uDD49-\uDD4E\uDD50-\uDD67\uDD6F\uDD70\uDD73-\uDD7A\uDD87\uDD8A-\uDD8D\uDD90\uDD95\uDD96\uDDA4\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA-\uDE4F\uDE80-\uDEC5\uDECB-\uDED2\uDED5\uDEE0-\uDEE5\uDEE9\uDEEB\uDEEC\uDEF0\uDEF3-\uDEFA\uDFE0-\uDFEB]|\uD83E[\uDD0D-\uDD3A\uDD3C-\uDD45\uDD47-\uDD71\uDD73-\uDD76\uDD7A-\uDDA2\uDDA5-\uDDAA\uDDAE-\uDDCA\uDDCD-\uDDFF\uDE70-\uDE73\uDE78-\uDE7A\uDE80-\uDE82\uDE90-\uDE95])\uFE0F|(?:[\u261D\u26F9\u270A-\u270D]|\uD83C[\uDF85\uDFC2-\uDFC4\uDFC7\uDFCA-\uDFCC]|\uD83D[\uDC42\uDC43\uDC46-\uDC50\uDC66-\uDC78\uDC7C\uDC81-\uDC83\uDC85-\uDC87\uDC8F\uDC91\uDCAA\uDD74\uDD75\uDD7A\uDD90\uDD95\uDD96\uDE45-\uDE47\uDE4B-\uDE4F\uDEA3\uDEB4-\uDEB6\uDEC0\uDECC]|\uD83E[\uDD0F\uDD18-\uDD1F\uDD26\uDD30-\uDD39\uDD3C-\uDD3E\uDDB5\uDDB6\uDDB8\uDDB9\uDDBB\uDDCD-\uDDCF\uDDD1-\uDDDD]|[\u2660-\u2767]\u0020)/g;
		this.qrcode_url = decodeURIComponent(e.url);
		this.canvas_tit= decodeURIComponent(e.title).replace(reg,'[表情]');
		// this.canvas_msg= decodeURIComponent(e.content).replace(reg,'[表情]');
		// this.come= '----来自'+decodeURIComponent(e.base_nickname);
		this.base_nickname= '领得尚品';
		this.base_avatar=self.$request.h5_img_url+'/static/images/logo.png';
		this.img_url=self.$request.h5_img_url+'/static/images/canvas_bg.png';
		this.$nextTick(function(){
			this.$refs.qrcode._makeCode();
		});
		
		// #ifdef H5
		self.wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
		  self.wx.onMenuShareTimeline({
		    title:self.$request.h5_share_name, // 分享标题
		    link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		    imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
		    success: function () {
		    // 用户点击了分享后执行的回调函数
		    }
		  });
		  self.wx.onMenuShareAppMessage({
		    title: self.$request.h5_share_name, // 分享标题
		    desc: '我发现了一个很不错的商城，买家具有超大实惠！', // 分享描述
		    link: self.$request.h5_share_url+'?page=index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		    imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
		    type: '', // 分享类型,music、video或link，不填默认为link
		    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
		    success: function () {
		      // 用户点击了分享后执行的回调函数
		    }
		  });
		});
		// #endif
	},
	components: {tkiQrcode},
	methods: {
//这是一个封装好的方法 
        promisify: api => {
            return (options, ...params) => {
                return new Promise((resolve, reject) => {
                    const extras = {
                        success: resolve,
                        fail: reject
                    }
                    api({ ...options, ...extras }, ...params)
                })
            }
        },
		drawImg1(){
			this.drawCanvas()
		},
		qrR(e){
			console.log(e)
			this.qrcode_url_new = e;
			uni.showLoading({
			    title: '加载中'
			});
			this.drawCanvas();
		},
		drawCanvas(){
			uni.showLoading({
			    title: '加载中'
			});
			var self = this;
			uni.getImageInfo({
			    src: self.base_avatar,
			    success: function (image) {
			    	self.img_header = image.path;
			    	uni.getImageInfo({
			    	    src: self.img_url,
			    	    success: function (image2) {
			    	    	self.img_goods = image2.path;
			    	    	const ctx = uni.createCanvasContext('firstCanvas');
			    	    	ctx.save();		
			    	    	ctx.beginPath();
			    	    	// only fill this rect, not in current path
			    	    	ctx.setFillStyle('#FFFFFF')
			    	    	ctx.fillRect(0, 0, 10000, 10000)
			    	    	
			    	    	// ctx.rect(0, 0, 10000, 10000)
			    	    	
			    	    	ctx.fill()
			    	    	ctx.closePath();
			    	    	ctx.save();
			    	    	
			    	    	ctx.beginPath();
			    	    	ctx.arc(40, 40, 25, 0, 2 * Math.PI)
			    	    	ctx.clip()
			    	    	ctx.drawImage(self.img_header, 15, 15, 50, 50)
			    	    	ctx.restore();
			    	    	
			    	    	ctx.closePath();
			    	    	ctx.save();
			    	    	
			    	    	
			    	    	ctx.beginPath();
			    	    	// 作者名称
			    	    	ctx.setTextAlign('left')    // 文字居中
			    	    	ctx.setFillStyle('#000000')  // 文字颜色：黑色
			    	    	ctx.setFontSize(16)         // 文字字号：22px
							
							var chr1 = self.base_nickname.split("");
							var temp1 = "";
							var row1 = [];
							for(var c = 0; c < chr1.length; c++){	
								if( ctx.measureText(temp1).width < 250 && ctx.measureText(temp1+(chr1[c])).width <= 250){
									temp1 += chr1[c];
								}
								else{
									row1.push(temp1);
									temp1 = chr1[c];
								}
							}
							row1.push(temp1);	
			    	    	ctx.fillText(row1[0], 80, 40);
			    	    	ctx.closePath();
			    	    	ctx.save();
			    	    	var chr = self.canvas_msg.split("");
	
			    	    	var temp = "";              
			    	    	              
			    	    	var row = [];
			    	    	
			    	    	for(var a = 0; a < chr.length; a++){
			    	    			
			    	    		if( ctx.measureText(temp).width < 280 && ctx.measureText(temp+(chr[a])).width <= 280){
			    	    			temp += chr[a];
			    	    		}
			    	    		else{
			    	    			row.push(temp);
			    	    			temp = chr[a];
			    	    		}
			    	    	}
							
			    	    	row.push(temp);
			    	    	
			    	    	ctx.setTextAlign('left')    // 文字居中
			    	    	ctx.setFillStyle('#999999')  // 文字颜色：黑色
			    	    	ctx.setFontSize(14)  
			    	    		
			    	    	if(row.length==1){
			    	    		row.push(' ');
			    	    		row.push(' ');
			    	    	}
			    	    	if(row.length==2){
			    	    		row.push(' ');
			    	    	}
			    	    	console.log(row)
			    	    	for(var b = 0; b < 3; b++){
			    	    		var str = row[b];
			    	    		if(b == 2){
			    	    			if(row[2]!==' '){
			    	    				str = str.substring(0,str.length-1)+'...';
			    	    			}else{
			    	    				str = str.substring(0,str.length-1);
			    	    			}
			    	    			
			    	    		}
			    	    		ctx.fillText(str,80,40+(b+1)*24);
			    	    		self.text_top = 40+(b+1)*24;
			    	    	}
			    	    	
			    	    	self.text_top = 40;
			    	    	ctx.setTextAlign('right')    // 文字居中
			    	    	ctx.setFillStyle('#999999')  // 文字颜色：黑色
			    	    	ctx.setFontSize(12) 
			    	    	ctx.fillText(self.come,320,self.text_top+24);
			    	    	
			    	    	ctx.beginPath();
			    	    					
			    	    	ctx.drawImage(self.img_goods, 15, self.text_top+48, 320, 320) //图片大小   320*250   355
			    	    	ctx.closePath();
			    	    	ctx.save();
			    	    	
			    	    	ctx.setTextAlign('left')    // 文字居中
			    	    	ctx.setFillStyle('#999999')  // 文字颜色：黑色
			    	    	ctx.setFontSize(14)  
			    	    	// ctx.fillText(self.canvas_mak,20, self.text_top+320);
			    	    	
			    	    	ctx.setTextAlign('right')    // 文字居中
			    	    	ctx.setFillStyle('#f12c20')  // 文字颜色：黑色
			    	    	ctx.setFontSize(12)  
			    	    	// ctx.fillText(self.canvas_money,330, self.text_top+385);
			    	    	ctx.fillText(self.canvas_money,330, self.text_top+385);
			    	    	
			    	    	// ctx.beginPath();
			    	    	// ctx.fillStyle = "#ffffff";
			    	    	// ctx.fillRect(0 ,self.text_top+330,420,10);
			    	    	// ctx.closePath();
			    	    	
			    	    	ctx.setTextAlign('left')    // 文字居中
			    	    	ctx.setFillStyle('#000000')  // 文字颜色：黑色
			    	    	ctx.setFontSize(16)  
			    	    	ctx.fillText('领得尚品，',20, self.text_top+420);
			    	    	ctx.fillText('与您携手，以变创盈！',20, self.text_top+440);
			    	    	ctx.fillText('识别小程序二维码',20, self.text_top+460);
			    	    	ctx.fillText('浏览更多笔记',20, self.text_top+480);
			    	    	
			    	    	
			    	    	// 小程序码
			    	    	const qrImgSize = 150
			    	    	ctx.drawImage(self.qrcode_url_new,240 , self.text_top+395, 100, 100)
			    	    	ctx.stroke()
			    	    	// 绘图生成临时图片
			    	    	ctx.draw(false,() => {
			    	    		uni.showLoading({
			    	    		    title: '加载中'
			    	    		});
			    	    	   setTimeout(function() {
			    	    		   uni.canvasToTempFilePath({
			    	    		   	canvasId:'firstCanvas',
			    	    		   	success: function(res){
			    	    		   		self.savedFilePath = res.tempFilePath;//相对路径
			    	    				self.showCanvas = false;
			    	    				uni.hideLoading();
			    	    		   	}
			    	    		   }) 
			    	    	   }, 1000);   
			    	    	})
			    	    }        
			    	});
			    },
				fail(err){
					
				}
			});	
		},
		saveImage(){
			var self = this;
			uni.showToast({
				title:'请长按上方图片保存图片~',
				icon:"none",
				duration:3000
			});
		
		}
	}
};
</script>
 
<style>
	.save-box{
		position: fixed;
		width: 750upx;
		height: 100upx;
		border-top: 1px solid #cccccc;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background-color: #FFFFFF;
		z-index: 9999;
	}
	.save-msg{
		font-size: 12px;
		color: #859dc2;
		margin-left: 40upx;
		/* margin-top: 20upx; */
	}
	.save-img{
		height: 68upx;
		margin-top: 20upx;
		padding: 0 40upx;
		line-height: 68upx;
		background-color: #859dc2;
		font-size: 14px;
		color: #FFFFFF;
		
	}
	.img-box-canvas{
		text-align: center;
		padding-top: 20upx;
	}
</style>